<script setup lang="ts">
import { ref, toRef, reactive, watch } from "vue";
import service from "~/service";
import type { ElForm } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>

const props = defineProps({
    account: String
})

const account = toRef(props, 'account')

const formData = reactive({
    fullName: '',
    username: '',
    mobile: '',
    employmentDate: ''
})

const rules = {
    fullName: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        }],
    username: [
        {
            required: true,
            message: '请输入工号',
            trigger: 'blur',
        }]
}

const emit = defineEmits(['confirm']);

const formRef = ref<FormInstance>()

const handleConfirm = async (formEl?: FormInstance) => {
    if (!formEl) {
        return
    }
    try {
        const result = await formEl.validate();
        if (result) {
            const res = await service.business.createMember(formData)
            if(res.code === 200){
                 emit('confirm')
            }
        }
    } catch (error) {
    }
}

const handleCancel = ()=>{
    emit('confirm')
}

watch(account, (val) => {
    formData.username = val || ''
})

</script>

<template>
    <div class="full-flex-column-layout business-man">
        <div class="tips">添加成员后会发送短信通知</div>
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-position="right"
            label-width="80px"
            class="dialog-form"
        >
            <el-form-item label="用户名：" prop="username">
                <el-input v-model="formData.fullName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="工号：" prop="username">
                <el-input v-model="formData.username" placeholder="系统自动生成工号" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
                <el-input v-model="formData.mobile" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="入职日期：">
                <el-date-picker
                    v-model="formData.employmentDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择入职日期"
                    class="date-picker"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <div class="button">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleConfirm(formRef)">确 认</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.business-man {
    .tips {
        color: #666666;
        margin-top: -10px;
        margin-left: -4px;
        padding-bottom: 12px;
        font-size: 12px;
    }
    .dialog-form {
        :deep(.el-form-item) {
            --el-font-size-base: 12px;
            --el-form-label-font-size: 12px;
        }
        :deep(.el-form-item__label) {
            color: #666666;
        }
        :deep(.date-picker) {
            width: 100%;
        }
    }
    .button {
        margin-top: 6px;
        text-align: right;
    }
}
</style>
